<template>
  <div>
    <div class="list">
      <el-card class="box-card1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
          <el-form-item label="模板名称">
            <el-input v-model="formInline.templateName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top:15px">
        <div style="text-align:right;">
          <el-button size="mini" type="primary" @click="addTemplate">添加模板</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="模板名称">
            <template slot-scope="scope">
              <el-button type='text' @click="showTemplateInfo(scope.row)">
                {{scope.row.templateName}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="templateRemark" label="模板说明" width="600">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.isStandard == '0'">
                <el-button type="primary" size="mini" @click="editMb(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteMb(scope.row.templateId)">删除</el-button>
              </span>
              <span v-if="scope.row.isStandard == '1'">
                <el-button type="info" size="mini" disabled>编辑</el-button>
                <el-button type="info" size="mini" disabled>删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </el-card>
    </div>
    <el-dialog title="维保模板详情" :visible.sync="dialogVisible" width="90%" :before-close="handleClose1">
      <el-form :model="form" :inline="true">
        <el-form-item label="模板名称" label-width="100px">
          <el-input v-model="form.templateName" autocomplete="off" size='small' disabled></el-input>
        </el-form-item>
        <el-form-item label="模板说明" label-width="100px">
          <el-input v-model="form.templateRemark" autocomplete="off" size='small' disabled></el-input>
        </el-form-item>
        <el-form-item label="设备类型" label-width="100px">
          <el-select v-model="form.eleTypeId" placeholder="请选择" size='small' clearable>
            <el-option v-for="item in eleoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维保周期" label-width="100px">
          <el-select v-model="form.maintTypeId" placeholder="请选择" size='small' clearable>
            <el-option v-for="item in maintoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTemplateInfo" size="small">查询</el-button>
          <el-button type="warning" @click="getAddmbx" size="small">模板项添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="temData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
        <el-table-column label="维保周期" prop="maintType">
        </el-table-column>
        <el-table-column prop="sheetName" label="表名" width="80">
        </el-table-column>
        <el-table-column prop="serialNo" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="maintContent" label="维保项目">
        </el-table-column>
        <el-table-column prop="maintPlace" label="维保位置">
        </el-table-column>
        <el-table-column prop="eleType" label="设备类型">
        </el-table-column>
        <el-table-column prop="requireResult" label="维保基本要求">
        </el-table-column>
        <el-table-column prop="isSystem" label="是否是TSG标准项目">
          <template slot-scope="scope">
            <span v-if="scope.row.isSystem == '1' ">
              是
            </span>
            <span v-else>
              否
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span>
              <el-button type="primary" size="mini" @click="editMbx(scope.row)" :disabled="scope.row.isSystem=='1'">编辑</el-button>
              <el-button type="danger" size="mini" @click="deleteMbx(scope.row.id)" :disabled="scope.row.isSystem=='1'">删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pagination1.pageNum"
        :page-size="pagination1.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination1.pageTotal"
        align='right'>
      </el-pagination>
      <el-dialog width="30%" :title="'模板项'+title" :visible.sync="innerVisible" append-to-body :before-close="handleClose2">
        <el-form :model="temitemform" :inline="true" :rules="mbxrules" ref="temitemform">
          <el-form-item label="维保周期" :label-width="formLabelWidth1" prop="maintTypeId">
            <el-select v-model="temitemform.maintTypeId" placeholder="请选择" size='small'>
              <el-option v-for="item in maintoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" :label-width="formLabelWidth1" prop="eleTypeId">
            <el-select v-model="temitemform.eleTypeId" placeholder="请选择" size='small'>
              <el-option v-for="item in eleoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名" :label-width="formLabelWidth1" prop="sheetName">
            <el-input v-model="temitemform.sheetName" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="序号" :label-width="formLabelWidth1" prop="serialNo">
            <el-input v-model.number="temitemform.serialNo" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="维保项目" :label-width="formLabelWidth1" prop="maintContent">
            <el-input v-model="temitemform.maintContent" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="维保位置" :label-width="formLabelWidth1" prop="maintPlace">
            <el-input v-model="temitemform.maintPlace" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="维保基本要求" :label-width="formLabelWidth1" prop="requireResult">
            <el-input v-model="temitemform.requireResult" autocomplete="off" size='small'></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="addItemTrue('temitemform')" v-if="title == '添加'">确 定</el-button>
          <el-button type="primary" @click="editItemTrue('temitemform')" v-if="title == '编辑'">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog :title="'维保模板'+title" :visible.sync="mbdialog" width="30%" :before-close="handleClose">
      <el-form :model="mbform" :inline="true" :rules="mbrules" ref="mbform">
        <el-form-item label="模板名称" label-width="100px" prop="templateName">
          <el-input v-model="mbform.templateName" autocomplete="off" size='small' style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="模板说明" label-width="100px">
          <el-input v-model="mbform.templateRemark" autocomplete="off" size='small' style="width:300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addTrue('mbform')" v-if="title == '添加'">确 定</el-button>
        <el-button type="primary" @click="editTrue('mbform')" v-if="title == '编辑'">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { geselectMaintTemplateList, getaddMaintTemplate, geteditMaintTemplate, getdeleteMaintTemplate, getselectMaintTemplateDetailList, getaddEleMaintTemplateItem, geteditEleMaintTemplateItem, getdeleteEleMaintTemplateItem } from '@/api/scheme'
export default {
  components: {

  },
  data () {
    return {
      mbxrules: {
        maintTypeId: [
          { required: true, message: '请选择维保周期', trigger: 'change' }
        ],
        eleTypeId: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        sheetName: [
          { required: true, message: '请输入表名', trigger: 'blur' }
        ],
        serialNo: [
          { required: true, message: '请输入序号', trigger: 'blur' },
          { type: 'number', message: '序号必须为数字值'}
        ],
        maintContent: [
          { required: true, message: '请输入维保项目', trigger: 'blur' }
        ],
        maintPlace: [
          { required: true, message: '请输入维保位置', trigger: 'blur' }
        ],
        requireResult: [
          { required: true, message: '请输入维保基本要求', trigger: 'blur' }
        ]
      },
      mbrules: {
        templateName: [
          { required: true, message: '请输入维保模板', trigger: 'blur' }
        ]
      },
      innerVisible: false,
      value: '',
      maintoptions: [
        {
          value: 10,
          label: '半月保'
        },
        {
          value: 11,
          label: '季度保'
        },
        {
          value: 12,
          label: '半年保'
        },
        {
          value: 13,
          label: '年保'
        },
        {
          value: 14,
          label: '按需维保'
        }
      ],
      temitemform: {},
      eleoptions: [
        {
          value: 10,
          label: '曳引与强制驱动电梯'
        },
        {
          value: 11,
          label: '曳引驱动乘客电梯'
        },
        {
          value: 12,
          label: '曳引驱动载货电梯'
        },
        {
          value: 13,
          label: '液压载货电梯'
        },
        {
          value: 14,
          label: '消防员电梯'
        },
        {
          value: 15,
          label: '自动扶梯与自动人行道'
        },
        {
          value: 16,
          label: '液压驱动电梯'
        },
        {
          value: 17,
          label: '液压乘客电梯'
        },
        {
          value: 18,
          label: '强制驱动载货电梯'
        },
        {
          value: 19,
          label: '自动扶梯'
        },
        {
          value: 20,
          label: '杂物电梯'
        },
        {
          value: 21,
          label: '其他'
        },
      ],
      formLabelWidth1: '120px',
      formLabelWidth: '80px',
      form: {
        eleTypeId: '',
        maintTypeId: '',
        templateName: '',
        templateRemark: ''
      },
      mbform: {},
      dialogVisible: false,
      activeName: 'first',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      pagination1: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      title: null,
      mbdialog: false,
      temData: [],
      tableData: [],
      templateId: null,
      id: null
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    editItemTrue (temitemform) {
      this.$refs[temitemform].validate((valid) => {
        if (valid) {
          geteditEleMaintTemplateItem({
            eleTypeId: this.temitemform.eleTypeId,
            maintContent: this.temitemform.maintContent,
            maintPlace: this.temitemform.maintPlace,
            maintTypeId: this.temitemform.maintTypeId,
            requireResult: this.temitemform.requireResult,
            serialNo: this.temitemform.serialNo,
            sheetName: this.temitemform.sheetName,
            id: this.id
          }).then(res => {
            if (res.data.code == '200') {
              this.getTemplateInfo()
              this.handleClose2()
              this.$message({
                type: 'success',
                message: '编辑成功!'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    editMbx (rows) {
      this.title = '编辑'
      this.id = rows.id
      this.innerVisible = true
      const params = JSON.parse(JSON.stringify(rows))
      this.temitemform = params
      this.$forceUpdate()
    },
    addItemTrue (temitemform) {
      this.$refs[temitemform].validate((valid) => {
        if (valid) {
          getaddEleMaintTemplateItem({
            eleTypeId: this.temitemform.eleTypeId,
            maintContent: this.temitemform.maintContent,
            maintPlace: this.temitemform.maintPlace,
            maintTypeId: this.temitemform.maintTypeId,
            requireResult: this.temitemform.requireResult,
            serialNo: this.temitemform.serialNo,
            sheetName: this.temitemform.sheetName,
            templateCustomId: this.templateId
          }).then(res => {
            if (res.data.code == '200') {
              this.getTemplateInfo()
              this.handleClose2()
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    deleteMbx (id) {
      this.$confirm('是否确认删除选中的模板项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          ids: [id]
        }
        getdeleteEleMaintTemplateItem(params).then(res => {
          if (res.data.code == '200') {
            this.getTemplateInfo()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //添加模板享
    getAddmbx () {
      this.title = '添加'
      this.innerVisible = true
    },
    deleteMb (id) {
      this.$confirm('是否确认删除选中的模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          ids: [id]
        }
        getdeleteMaintTemplate(params).then(res => {
          if (res.data.code == '200') {
            this.gettableData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editMb (rows) {
      const params = JSON.parse(JSON.stringify(rows))
      this.mbform = params
      this.mbdialog = true
      this.title = '编辑'
    },
    editTrue (mbform) {
      this.$refs[mbform].validate((valid) => {
        if (valid) {
          geteditMaintTemplate({
            id: this.mbform.templateId,
            templateName: this.mbform.templateName,
            templateRemark: this.mbform.templateRemark
          }).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.handleClose()
              this.$message({
                type: 'success',
                message: '编辑成功!'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    addTrue (mbform) {
      this.$refs[mbform].validate((valid) => {
        if (valid) {
          getaddMaintTemplate({
            templateName: this.mbform.templateName,
            templateRemark: this.mbform.templateRemark
          }).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.handleClose()
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    handleClose2 () {
      this.$refs.temitemform.resetFields()
      this.temitemform = {}
      this.innerVisible = false
    },
    handleClose1 () {
      this.form.eleTypeId = ''
      this.form.maintTypeId = ''
      this.dialogVisible = false
    },
    // 关闭弹框
    handleClose () {
      this.$refs.mbform.resetFields()
      this.mbform = {}
      this.mbdialog = false
    },
    // 获取模板表格数据
    gettableData () {
      const query = {
        templateName: this.formInline.templateName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      geselectMaintTemplateList(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    addTemplate () {
      this.title = '添加'
      this.mbdialog = true
    },
    getTemplateInfo () {
      getselectMaintTemplateDetailList({
        eleTypeId: this.form.eleTypeId,
        maintTypeId: this.form.maintTypeId,
        pageNum: this.pagination1.pageNum,
        pageSize: this.pagination1.pageSize,
        templateId: this.templateId,
        templateName: this.form.templateName,
        templateRemark: this.form.templateRemark
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.temData = res.data.data.list
          this.pagination1.pageTotal = res.data.data.total
        }
      })
    },
    showTemplateInfo (rows) {
      this.dialogVisible = true
      this.form = rows
      this.templateId = rows.templateId
      this.getTemplateInfo()
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    handleSizeChange1 (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.getTemplateInfo()
    },
    handleCurrentChange1 (val) {
      this.pagination.pageNum = val
      this.getTemplateInfo()
    },
  }
}

</script>
<style lang="less" scoped>
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
.list {
  .clearfix {
    font-weight: bold;
  }
  .el-input {
    width: 300px;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>
